<template>
    <div>
        <div class="head">
            <span class="back" @click="router.push('/index/sale')">&lt;</span><span class="title">发布</span>
        </div>
        <div class="main">
            <div>
                <span>交易分类</span><span class="d3">道具&gt;</span>
            </div>
            <hr/>
            <div>
                <span>交易类型</span><span class="d3">装备&gt;</span>
            </div>
            <hr/>
            <div>
                <span>客户端</span><span class="d3">安卓QQ&gt;</span>
            </div>
            <hr/>
            <div>
                <span>出售方式</span><span class="d3">寄售交易&gt;</span>
            </div>
        </div>
        <div class="foot">
            <button @click="router.push('/addt')">下一步</button>
        </div>
    </div>

</template>

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter()
</script>

<style scoped>
.head {
  height: 50px;
  width: 100%;
  background-color: rgb(207, 19, 34);
  color: white;
  line-height: 50px;
  /* text-align: center; */
  font-size: 22px;
}
.head .back{
    margin-left: 5%;
    cursor: pointer;
}
.head .title{
    margin-left: 35%;
}
.main{
    margin-top: 50px;
    height: 300px;
    width: 100%;
    font-size: 20px;
}
.main div{
    line-height: 50px;
    height: 50px;
    margin-left:5%;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
.foot{
    margin-top: 100px;
}
.foot button{
    background-color: rgb(207, 19, 34);
    color: white;
    width: 90%;
    margin-left: 5%;
    border: 1px solid rgb(207, 19, 34);
    border-radius: 8px;
    height: 60px;
    font-size: 22px;
}
.d3{
    color: #aca2a2;
}
</style>